import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArticleListItem } from '@/interfaces/article';
import ArticleCard from '@/components/common/ArticleCard';
import SearchBar from '@/components/common/SearchBar';
import CategoryFilter from '@/components/common/CategoryFilter';

const mockArticles: ArticleListItem[] = [
  {
    id: '1',
    title: 'Getting Started with React 18',
    excerpt: 'Learn the new features and improvements in React 18, including concurrent rendering and automatic batching.',
    author: 'John Doe',
    publishDate: '2024-01-15',
    tags: ['React', 'JavaScript', 'Frontend'],
    category: 'Development',
    readTime: 5,
    coverImage: 'https://via.placeholder.com/400x200'
  },
  {
    id: '2',
    title: 'Building Beautiful UIs with Tailwind CSS',
    excerpt: 'Discover how to create stunning user interfaces using Tailwind CSS utility classes.',
    author: 'Jane Smith',
    publishDate: '2024-01-10',
    tags: ['CSS', 'Design', 'Tailwind'],
    category: 'Design',
    readTime: 8,
    coverImage: 'https://via.placeholder.com/400x200'
  },
  {
    id: '3',
    title: 'TypeScript Best Practices',
    excerpt: 'Learn advanced TypeScript patterns and best practices for large-scale applications.',
    author: 'Mike Johnson',
    publishDate: '2024-01-05',
    tags: ['TypeScript', 'JavaScript', 'Best Practices'],
    category: 'Development',
    readTime: 12,
  }
];

const Home: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  const [articles] = useState<ArticleListItem[]>(mockArticles);

  const categories = ['All', 'Development', 'Design', 'Technology', 'Lifestyle'];

  const filteredArticles = articles.filter(article => {
    const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         article.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = selectedCategory === 'All' || article.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className="min-h-screen bg-white dark:bg-ios-gray-900">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 dark:bg-ios-gray-900/80 backdrop-blur-apple border-b border-ios-gray-200 dark:border-ios-gray-700">
        <div className="max-w-4xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between mb-6">
            <h1 className="text-2xl font-bold text-ios-gray-900 dark:text-white font-sf-pro">
              Apple Blog
            </h1>
            <div className="flex items-center space-x-3">
              <Link
                to="/settings"
                className="p-2 text-ios-gray-600 dark:text-ios-gray-400 hover:text-ios-blue transition-colors"
                title="Settings"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </Link>
              <Link
                to="/editor"
                className="bg-ios-blue text-white px-4 py-2 rounded-apple-md hover:bg-ios-blue/90 transition-colors"
              >
                Write
              </Link>
            </div>
          </div>
          
          <SearchBar 
            value={searchTerm} 
            onChange={setSearchTerm}
            placeholder="Search articles..."
          />
          
          <CategoryFilter 
            categories={categories}
            selectedCategory={selectedCategory}
            onCategoryChange={setSelectedCategory}
          />
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-4xl mx-auto px-4 py-8">
        {filteredArticles.length === 0 ? (
          <div className="text-center py-12">
            <div className="text-ios-gray-500 dark:text-ios-gray-400">
              <p className="text-lg">No articles found</p>
              <p className="text-sm mt-2">Try adjusting your search or category filter</p>
            </div>
          </div>
        ) : (
          <div className="grid gap-6">
            {filteredArticles.map((article) => (
              <ArticleCard key={article.id} article={article} />
            ))}
          </div>
        )}
      </main>
    </div>
  );
};

export default Home;